<template>
  <div class="mod-menu">
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" size="small" @click="showAdd(0)" icon="el-icon-plus">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" border style="width: 100%;">
      <el-table-column type="index" width="50" fixed></el-table-column>
      <table-tree-column header-align="center" prop="resourcename" label="名称" min-width="200"
                       treeKey="id" childKey="list" parentKey="pid" levelKey="level" fixed></table-tree-column>
      <el-table-column header-align="center" prop="category" label="资源类型" min-width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.category===1" type="info">机构</el-tag>
          <el-tag v-if="scope.row.category===2">流程模板</el-tag>
        </template>
      </el-table-column>
      <el-table-column header-align="center" label="菜单路径" prop="path" min-width="150"></el-table-column>
      <el-table-column header-align="center" label="权限字符串" prop="permission" min-width="150"></el-table-column>
      <el-table-column header-align="center" label="所属模块" prop="usertype" min-width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.usertype===1" type="info">管理员</el-tag>
          <el-tag v-if="scope.row.usertype===2">学生</el-tag>
        </template>
      </el-table-column>
      <el-table-column header-align="center" label="可用性" prop="available" min-width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.available===1" type="success">可用/显示</el-tag>
          <el-tag v-if="scope.row.available===2" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column header-align="center" label="操作" min-width="320" fixed="right">
        <template slot-scope="scope">
          <el-button v-show="scope.row.category===1" icon="el-icon-circle-plus" @click="showAdd(scope.row.id)" size="mini" round>添加子节点</el-button>
          <el-button v-show="scope.row.category===2" @click="goto(scope.row.path)" size="mini" round>打开流程模板</el-button>
          <el-button v-show="scope.row.category===1" @click="showAdmin(scope.row)" size="mini" round>管理员</el-button>
          <el-dropdown>
            <span class="el-dropdowm-link">
              <el-button size="mini" round>更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button type="info" icon="el-icon-message" @click="detail(scope.row)" size="mini" round>详情</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)" size="mini" round>编辑</el-button></el-dropdown-item>
              <el-dropdown-item><el-button size="mini" round type="danger" icon="el-icon-delete" @click="deleteit(scope.row)">删除</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>


    <!--资源添加编辑查看-->
    <el-dialog :title="formTitle" :visible.sync="visible" :close-on-click-modal="false">
      <el-form :model="dataForm" label-width="100px" :rules="formRules">
        <el-form-item label="名称" prop="resourcename">
          <el-input v-model="dataForm.resourcename" :disabled="action==='detail'"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="category">
          <el-radio-group v-model="dataForm.category" size="small" :disabled="action==='detail'||action==='edit'">
            <el-radio :label="1" border>机构</el-radio>
            <el-radio :label="2" border>流程模板</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="层级">
          <el-input-number v-model="dataForm.level" :disabled="action==='detail'"></el-input-number>
        </el-form-item>
        <el-form-item label="显示顺序">
          <el-input-number v-model="dataForm.priority" :disabled="action==='detail'"></el-input-number>
        </el-form-item>
        <el-form-item label="菜单路径">
          <el-input v-model="dataForm.path" :disabled="action==='detail'"></el-input>
        </el-form-item>
        <el-form-item label="权限字符串">
          <el-input v-model="dataForm.permission" :disabled="action==='detail'"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dataForm.description" :disabled="action==='detail'"></el-input>
        </el-form-item>
        <el-form-item label="所属模块">
          <el-radio-group v-model="dataForm.usertype" size="small" :disabled="action==='detail'">
            <el-radio :label="1" border>管理员</el-radio>
            <el-radio :label="2" border>普通用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="可用性">
          <el-radio-group v-model="dataForm.available" size="small" :disabled="action==='detail'">
            <el-radio :label="1" border>可用/显示</el-radio>
            <el-radio :label="2" border>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="dataForm.icon" placeholder="采用fontawesome字体库" :disabled="action==='detail'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()" :loading="submitLoading">确定</el-button>
        </span>
    </el-dialog>

    <!--机构管理员-->
    <el-dialog title="管理员" :visible.sync="adminVisible" :close-on-click-modal="false">
      <el-select v-model="manager" placeholder="请选择一个用户" style="width:50%;margin-left: 25%;">
        <el-option v-for="item in users" :key="item.id" :label="item.realName+item.username" :value="item.id"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
          <el-button @click="adminVisible = false">取消</el-button>
          <el-button type="primary" @click="managerSubmit()" :loading="submitLoading">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import TableTreeColumn from "../../components/table-tree-column/index";
  import API from '@/api'

  export default {
    components: {TableTreeColumn},
    name: "index",
    data() {
      return {
        // 弹框表单
        dataForm: {},
        dataFormInit: {
          id:"",
          resourcename: "",
          category: 1,
          level: "1",
          priority: "0",
          pid: "0",
          path: "",
          permission: "",
          description: "",
          usertype: 2,
          available: 1,
          icon: ""
        },
        formRules: {
          resourcename: [
            {required: true, message: "资源名称不可为空", trigger: 'blur'},
            {min: 1, max: 20, message: '长度应在20个字符之内', trigger: 'blur'}
          ]
        },
        formTitle: "",
        visible: false,
        submitLoading: false,
        action:"detail",  //detail-查看详情 add-添加  edit-编辑

        //管理员
        adminVisible:false,
        manager:"",
        users:[],
        roles:[],
        //列表
        dataList: [],
      }
    },
    methods: {
      goto(value){
        this.$router.push({path:value,query:{origin:this.$route.path}});
      },
      showAdd(pid) {
        this.dataForm = Object.assign({},this.dataFormInit);
        this.action = "add";
        this.formTitle = "添加";
        this.dataForm.pid = pid;
        this.visible = true;
      },
      showAdmin(value){
        console.log(value);
        API.user.list().then(res=>{
          this.users = res.data.page.list;
          this.adminVisible = true;
        }).catch(error=>{
          console.error(error);
        });

      },
      detail(value){
        this.dataForm = {};
        this.action = "detail";
        this.formTitle = "查看详情"
        this.dataForm = value;
        this.visible = true;
      },
      edit(value){
        this.dataForm = {};
        this.action = "edit";
        this.formTitle = "编辑";
        this.dataForm = value;
        this.visible = true;
      },
      deleteit(value){
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          console.log(value.id);
          API.resource.deleteit(value.id).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: '删除失败',
                type: 'error'
              });
            }
            this.getDataList();
          });
        }).catch(() => {
          if (error) console.log(error);
        });
      },
      dataFormSubmit() {
        this.submitLoading = true;
        let tick = this.dataForm.id == ''? API.resource.add(this.dataForm):API.resource.modify(this.dataForm);
        tick.then((res) => {
          console.log(res.data);
          if (!res.data.code) {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getDataList();
            this.visible = false;
          } else {
            this.$message.error(res.data.msg);
          }
          this.submitLoading = false;
        }).catch((error) => {
          this.$message.error(error);
          this.submitLoading = false;
        });
      },
      managerSubmit(){
        console.log(this.manager);
      },
      getDataList(){
        API.resource.nav().then((res) => {
          console.log(res.data);
          this.dataList = res.data.menuList;
          console.log(this.dataList);
        }).catch(error => {
          this.$message.error(error);
        });
      }
    },
    activated() {
      this.getDataList();
    }
  }
</script>
